<template>
  <div class="app">
      <header>
          <h4>分类</h4>
      </header>
      <section>
         <div class="con" v-for="(item,index) in list" :key="index">
             <p>{{item.Subject}}</p>
             <div class="con_1" >
                 <dl v-for="(ite,inde) in item.Content" :key="inde" :class="item.Layout=='border'?'border1':''">
                     <dt v-if="ite.Icon"><img :src="ite.Icon" alt=""></dt>
                      <dd>{{ite.Label}}</dd>
                 </dl>
             </div>
         </div>
      </section>
      <footer>
         <ul>
             <li>首页</li>
             <li>分类</li>
             <li>我的</li>
         </ul>
      </footer>
  </div>
</template>

<script>
import axios from "axios"
import App_1 from "./commpont/app_1.vue"
export default {
    data(){
        return{
            list:[],
            curindex:0
        }
    },
    methods:{
        
    },
    components:{
        App_1
    },
    mounted(){
        axios.post('/list').then(res=>{
            console.log(res.data);
            this.list=res.data
        })
    },
}
</script>

<style lang="less">
.con{
    width: 100%;
    margin-bottom: 20px;
    img{
        width: 100px;
        height: 100px;
    }
}
.con_1{
    width: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    // margin: 10px;    
    align-items: center;
    dl{
        margin: 10px 0;
        width: 25%;
    }
    .border1{
        border: 1px solid #ccc;
        font-family: "楷体";

        dt{
            margin-top: 5px;
        }
        dd{
            padding: 6px 8px;
        }
        img{
            width: 50px;
            height: 50px;
        }
    }
}
.con>p{
    font-size: 16px;
    color: #999;
}
.app{
    display: flex;
    flex-direction: column;
    header{
        line-height: 40px;
        height: 40px;
        background: #ddd;
        text-align: center;
    }
    section{
        flex: 1;
        overflow: hidden;
        overflow-y: scroll;
    }
    footer{
        height: 40px;
        background: #ddd;
        ul{
            height: 100%;
            display: flex;
            align-items: center;
            li{
                flex: 1;
                text-align: center;
            }
        }
    }
}
</style>